<template>
	<view class="member">
		<!-- 导航栏 -->
		<!-- <view class="navBox flex-r-s-c" :style="'top:'+ (height + 8) + 'rpx'">
			<u-icon style="position: absolute; left: 40rpx; top: 50%; transform: translateY(-50%);" name="arrow-left"
				size="32" @tap="navigateBack"></u-icon>
			<view class="text">会员</view>
		</view> -->
		<!-- 背景 -->
		<!-- <view class="bjImage">
			<image :src="image+'assets/web_img/edit16.png'" mode=""></image>
		</view> -->
		<!-- 会员卡 -->
		<view class="cardBox">
			
			<view class="swiper">
				<swiper style="height: 336rpx;" :autoplay="false" :interval="4000" :duration="2500" circular indicator-dots @change="chooseLev">
					<swiper-item  v-for="(item,index) in ruleList" :key="index" >
						<view class="nameBox flex-r-s-c">
							<image src="/static/my/hyhgbj.png" mode=""></image>
							<view class="text">
								<view class="" style="color: #EDC76C;font-size: 32rpx;height: 44rpx;line-height: 44rpx;">
									Lv-{{item.memberLevel}}
								</view>
								<view class="" style="font-size: 28rpx;color: #BABABA;height: 40rpx;line-height: 40rpx;">
									升级享额外收益永久有效
								</view>
							</view>
						</view>
						<view class="nameBox2 flex-r-s-c">
							<image src="" mode=""></image>
							<view class="text" style="display: flex;width: 280rpx;justify-content: space-between;">
								<view class="" >
									<view class="" style="color: #EDC76C;">
										扫码上限
									</view>
									<view class="num" >
										{{item.allowCount}}
									</view>
								</view>
								<view class="" >
									<view class="" style="color: #EDC76C;">
										推广分佣
									</view>
									<view class="num">
										{{item.pointRate}}%
									</view>
								</view>
							</view>
						</view>
						<view class="imageBox">
							<image src="/static/my/zsbj.png" mode=""></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
		</view>
		<!-- 简介 -->
		<view class="introduce">
			<!-- <u-parse :html="pageData.content"></u-parse> -->
			<view class="" style="font-weight:600;">
				扫码上限 : {{allowCount}}次
			</view>
		</view>
		<view class="introduce">
			<!-- <u-parse :html="pageData.content"></u-parse> -->
			<view class="">
				下级会员返佣 : {{commissionRate}}%
			</view>
		</view>
		<view class="introduce">
			<view class="" >
				下级会员积分返佣 : {{pointRate}}%
			</view>
		</view>
		<view class="introduce">
			<view class="" >
				专属海报：通过分享海报邀请好友成为你的下级
			</view>
		</view>
		<!-- 购买 -->
		<view class="purchase" v-if="level !=5">
			<!-- <view class="" style="display: inline-block;">
				<u-checkbox-group style="float: left;height: 22rpx;line-height: 48rpx;">
					<u-checkbox v-model="checked" shape="circle" active-color="#000">
						我已阅读并同意 
					</u-checkbox>	
				</u-checkbox-group>
				<view class="agreement" style="color: #000;float: left;height: 40rpx;line-height:50rpx;" @click="toAgree">《付费会员服务协议》</view>
			</view> -->
			
			<view class="btn" @tap.stop="purchase">仅需{{nextPrice}}元可立即升级</view>
		</view>
		<view style="width: 100%; height: 100rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				checked: true,
				height: this.$utils.height(),
				image: this.$base.smallimgUrl,
				pageData: {},
				ruleList:[],
				level:'',
				moneyList:{},
				id:'',
				sn:'',
				commissionRate:'',
				allowCount:'',
				pointRate:'',
				nextPrice:''
			};
		},
		onLoad() {
			this.getUserInfo()
			this.getLevel()
		},
		methods: {
			chooseLev(e){
				console.log(this.ruleList[e.detail.current],'eeeeeeeeeeeee')
				let r = e.detail.current+1
				this.allowCount = this.ruleList[e.detail.current].allowCount
				this.commissionRate = this.ruleList[e.detail.current].commissionRate
				this.pointRate = this.ruleList[e.detail.current].pointRate
				this.nextPrice = this.ruleList[e.detail.current].price
				this.id = this.ruleList[e.detail.current].id
			},
			getUserInfo(){
				let that = this
				that.$api.getUserInfo().then(res => {
					that.level = res.data.data.memberLevel
					that.getMember()
				})
			},
			toAgree(){
				uni.navigateTo({
					url:'/pages/my/agreement/agreement?type=3'
				})
			},
			// 返回
			navigateBack(){
				uni.navigateBack()
			},
			// 获取会员卡信息
			getMember(){
				let that = this
				that.$api.ruleList().then(res => {
					if(that.level != 5 ){	
						that.ruleList = res.data.rows.filter(item => item.memberLevel > that.level)
						console.log(that.level,'that.level',that.ruleList)
						that.id = that.ruleList[0].id
						that.commissionRate = that.ruleList[0].pointRate
						that.allowCount = that.ruleList[0].allowCount
						that.pointRate = that.ruleList[0].pointRate
						that.nextPrice = that.ruleList[0].price
					}else{
						console.log(2) 
						that.ruleList = res.data.rows
						that.allowCount = that.ruleList[0].allowCount
						that.pointRate = that.ruleList[0].pointRate
						that.commissionRate = that.ruleList[0].commissionRate
						that.nextPrice = that.ruleList[0].price
					}
				})
			},
			// 获取当前登录用户信息
			getLevel(){
				let that = this
				that.$api.level().then(res => {
					this.moneyList = res.data.data
					// console.log(res.data.data,'ruleList')
				})
			},
			payment(){
				let that = this
				that.$api.payment('WECHAT','MP',{
					clientType:'MP',
					orderType:'ORDER',
					// sn:'sn2306251672882042685386752'
					sn:that.sn
				}).then(res => {
					
					
					uni.requestPayment({
						...res.data.data,
						success(res1){
							that.$api.paymentResult({
								clientType:'MP',
								orderType:'ORDER',
								sn:that.sn
							}).then(res => {
								 // console.log(res.data,'res111111111111')
								 if(res.data.code == 200){
									 uni.showToast({
									 	title: '升级成功',
									 	icon: 'none',
									 	duration: 2000
									 })
									 uni.navigateBack()
								 }
							
							})
							
							
						},
						fail(err) {
							console.log(err)
						}
					})
				})
			},
			// 点击支付生成订单
			purchase(){
				let that = this
				// if(!that.checked) return that.$utils.toast('请勾选付费会员服务协议')
				that.$api.order({
					memberLevelRuleId: that.id
				}).then(res => {
					if(res.data.code == 200){
						that.sn = res.data.data.sn
						that.payment()
					}
					// uni.requestPayment({
					// 	...res.data.data,
					// 	success(res1){
					// 		// console.log(res1)
					// 		that.$utils.toast('购买成功')
					// 		uni.navigateBack()
					// 	},
					// 	fail(err) {
					// 		console.log(err)
					// 	}
					// })
				})
			},
		}
	}
</script>

<style lang="less">
	.member {
		width: 100vw;
		position: relative;

		.navBox {
			width: 100%;
			height: 64rpx;
			line-height: 64rpx;
			left: 0;
			position: absolute;

			.text {
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
			}
		}

		.bjImage {
			width: 100%;

			image {
				width: 100%;
				height: 512rpx;
			}
		}

		.cardBox {
			width: 90%;
			height: 280rpx;
			// background: linear-gradient(180deg, #F7F0E5 0%, #EBDCC7 100%);
			background: linear-gradient(103.09deg, #222A42 2.06%, #464D63 97.75%);
			border-radius: 20rpx;
			backdrop-filter: blur(10px);
			margin: 0 auto;
			margin-top: 40rpx;
			margin-bottom: 50rpx;
			position: relative;

			.nameBox {
				position: absolute;
				left: 40rpx;
				top: 40rpx;

				image {
					width: 96rpx;
					height: 96rpx;
					margin-right: 30rpx;
				}

				.text {
					font-size: 32rpx;
					font-weight: 400;
				}
			}
			.nameBox2 {
				position: absolute;
				left: 40rpx;
				top: 150rpx;
			
				image {
					width: 96rpx;
					height: 96rpx;
					margin-right: 30rpx;
				}
			
				.text {
					font-size: 32rpx;
					font-weight: 400;
					view{
						font-size: 24rpx;
						text-align: center;
						.num{
							color: #BABABA;
							height: 50rpx;
							line-height: 50rpx;
						}
					}
				}
			}
			.imageBox {
				width: 270rpx;
				height: 210rpx;
				position: absolute;
				top: 56rpx;
				right: 12rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.number {
				position: absolute;
				right: 20rpx;
				bottom: 20rpx;
				font-size: 28rpx;
				font-weight: 400;
			}

		}

		.introduce {
			width: 90%;
			margin: 26rpx auto;
		}


		.purchase {
			width: 90%;
			position: fixed;
			bottom: 200rpx;
			left: 50%;
			transform: translateX(-50%);
			margin: 0 auto;
			margin-top: 100rpx;
			.btn{
				width: 100%;
				height: 96rpx;
				text-align: center;
				line-height: 96rpx;
				background-color: #3DAD81;
				color: #fff;
				// border-radius: 96rpx;
				border-radius: 5px;
				font-size: 28rpx;
				font-weight: 500;
				margin-top: 20rpx;
			}
		}

	}
</style>
